<html>

<head>
    <title>003 | Reflections | J3D</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" href="common/common.css"/>
    <script type="text/javascript" src="common/common.js"></script>

    <script type="text/javascript" src="../build/j3d.js"></script>


    <script>
        var engine, scene;
        var root, monkey, camera, reflective;
        var mx = 0, my = 0;
        var nmx = 0, nmy = 0;
        var isMouseDown = false;

        function init() {
            if (!checkWebGL()) return;

            engine = new J3D.Engine();
            engine.setClearColor(J3D.Color.white);

            camera = new J3D.Transform();
            camera.camera = new J3D.Camera({far: 100});
            camera.position.z = 4;
            engine.camera = camera;

            root = new J3D.Transform();
            root.add(camera);
            engine.scene.add(root);

            cubemap = new J3D.Cubemap({
                left: "models/textures/skybox/left.jpg",
                right: "models/textures/skybox/right.jpg",
                up: "models/textures/skybox/up.jpg",
                down: "models/textures/skybox/down.jpg",
                back: "models/textures/skybox/back.jpg",
                front: "models/textures/skybox/front.jpg"
            });

            engine.scene.addSkybox(cubemap);

            monkey = new J3D.Transform();

            monkey.renderer = J3D.BuiltinShaders.fetch("Reflective");
            monkey.renderer.uCubemap = cubemap;

            J3D.Loader.loadJSON("models/monkeyhi.js", function(j) {
                monkey.geometry = new J3D.Mesh(j);
            });

            engine.scene.add(monkey);

            document.onmousemove = onMouseMove;

            draw();
        }

        function onMouseMove(e) {
            mx = e.clientX;
            my = e.clientY;
            nmx = ( e.clientX / window.innerWidth  ) * 2 - 1;
            nmy = ( e.clientY / window.innerHeight ) * 2 - 1;
        }

        function draw() {
            var mh = false;

            root.rotation.x += nmy * J3D.Time.deltaTime / 1000;
            root.rotation.y += nmx * J3D.Time.deltaTime / 2000;

            engine.render();
            requestAnimationFrame(draw);
        }

    </script>

</head>

<body onload="init();">
<script>
    setLabels("003. Reflections", "A skybox and a reflective material<br>Cubemap by <a href='http://www.ataricommunity.com/forums/showthread.php?t=506748'>Jockum Skoglund</a>");
</script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-24294554-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>

</body>

</html> 